<template>
  <div class="container">
    <q-table selection="multiple" :columns="columns" :rows="videos">
      <template v-slot:body-cell-video="props">
        <q-td auto-width>
          <q-img style="width: 166px; height: 100%" :src="props.value" />
        </q-td>
      </template>
      <template v-slot:body-cell-audio="{ row }">
        <q-td auto-width>
          <div class="video-info column">
            <div class="video-title one-line-text">{{ row.title }}</div>
          </div>
        </q-td>
      </template>
      <template v-slot:body-cell-status="{ value }">
        <q-td auto-width>
          <video-status-icon :status="value" />
        </q-td>
      </template>
      <template v-slot:body-cell-ratio>
        <q-td auto-width>
          <div class="column">
            <div style="width: 100%; text-align: end">80%</div>
            <q-linear-progress
              rounded
              style="width: 88px"
              size="8px"
              :value="0.8"
              color="white"
            ></q-linear-progress>
          </div>
        </q-td>
      </template>
    </q-table>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onBeforeMount } from 'vue';
import VideoStatusIcon from 'components/video/VideoStatusIcon.vue';
import { useUserStore } from 'src/stores/user-store';
const columns = ref([
  {
    name: 'video',
    label: 'Video',
    field: 'coverImage',
    align: 'left',
  },
  {
    name: 'audio',
    label: 'Audio',
    align: 'left',
  },
  { name: 'caption', label: 'Caption Title' },
  { name: 'status', label: 'Status', field: 'status', align: 'left' },
  { name: 'language', label: 'Language', align: 'center' },
  { name: 'plays', label: 'Plays', field: 'viewCount', align: 'center' },
  {
    name: 'ratio',
    label: 'Ratio',
    field: 'ratio',
    align: 'left',
  },
  { name: 'date', label: 'Date', field: 'createTimeLabel', align: 'center' },
] as any);
const userStore = useUserStore();
onBeforeMount(async () => {
  await userStore.getMyHistory({ page: 0, size: 20 });
});
const videos = computed(() => userStore.myHistory);
</script>
<style lang="scss" scoped>
$description-width: 244px;
.video-info {
  width: $description-width;
  max-width: $description-width;
  .video-title {
    width: $description-width;
    font-size: 14px;
    font-weight: bold;
  }
  .video-description {
    width: $description-width;
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    font-size: 12px;
    color: #808080;
    word-break: break-all;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
</style>
